<template>
  <v-app id="app" v-if="this.$route.meta.public==true">
    <router-view />
    <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">
      {{ snackbar.text }}
      <v-btn dark flat @click.native="snackbar.show = false" icon>
        <v-icon>close</v-icon>
      </v-btn>
    </v-snackbar>
  </v-app>
  <v-app id="app" v-else>
    <v-navigation-drawer v-model="primaryDrawer.model" :permanent="primaryDrawer.type === 'permanent'" :temporary="primaryDrawer.type === 'temporary'" :clipped="primaryDrawer.clipped" :floating="primaryDrawer.floating" :mini-variant="primaryDrawer.mini" fixed overflow app width="200">
      <v-toolbar color="blue lighten-1" dark>
        <v-list class="pa-0">
          <v-list-tile avatar>
            <v-list-tile-avatar>
              <img src="https://randomuser.me/api/portraits/men/85.jpg">
            </v-list-tile-avatar>
            <v-list-tile-content>
              <v-list-tile-title>John Leider</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-toolbar>
      <v-list dense expand>
        <template>
          <v-list-tile v-for="item in items" :key="item.title" :to="item.href" ripple="ripple" no-action="no-action">
            <v-list-tile-action>
              <v-tooltip right v-if="primaryDrawer.mini">
                <v-icon slot="activator" fab>{{ item.icon }}</v-icon>
                <span>{{item.title}}</span>
              </v-tooltip>
              <v-icon v-else>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar :clipped-left="primaryDrawer.clipped" color="light-blue" fixed dark app>
      <v-toolbar-side-icon v-on:click="toggleMenu"></v-toolbar-side-icon>
      <v-toolbar-title>
      </v-toolbar-title>
      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>
      <v-spacer></v-spacer>
      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
        <v-btn icon large flat slot="activator">
          <v-avatar size="40px">
            <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="Michael Wang" />
          </v-avatar>
        </v-btn>
        <v-list class="pa-0">
          <v-list-tile v-for="(item,index) in dropdownItems" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
            <v-list-tile-action v-if="item.icon">
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-toolbar>
    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer :inset="true" app>
      <span class="px-3">&copy; {{ new Date().getFullYear() }}</span>
    </v-footer>

    <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">
      {{ snackbar.text }}
      <v-btn dark flat @click.native="snackbar.show = false" icon>
        <v-icon>close</v-icon>
      </v-btn>
    </v-snackbar>
  </v-app>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      dropdownItems: [
        {
          icon: "settings",
          href: "#",
          title: "设置",
          click: e => {
            console.log(e);
          }
        },
        {
          icon: "fullscreen_exit",
          href: "#/login",
          title: "退出",
          click: e => {
            this.$cookie.delete("password");
            window.$success("退出成功");
          }
        }
      ],
      snackbar: {
        show: false,
        text: "",
        color: ""
      },
      dark: false,
      drawers: ["Default (no property)", "Permanent", "Temporary"],
      items: [
        { title: "账单", icon: "dashboard", href: "/storeVoucher" },
        { title: "会员卡管理", icon: "account_box", href: "/cardmanagement" },
        { title: "系统设置", icon: "gavel", href: "/storeInfo" },
        {
          title: "分店管理",
          icon: "add_shopping_cart",
          href: "/branchmanagement"
        }
      ],
      primaryDrawer: {
        model: null,
        type: "Default (no property)",
        clipped: false,
        floating: false,
        mini: true,
        isLg: true
      },
      footer: {
        inset: false
      }
    };
  },
  created() {
    window.$info = msg => {
      this.snackbar.color = "info";
      this.snackbar.text = msg;
      this.snackbar.show = true;
    };
    window.$error = msg => {
      this.snackbar.color = "error";
      this.snackbar.text = msg;
      this.snackbar.show = true;
    };
    window.$warning = msg => {
      this.snackbar.color = "warning";
      this.snackbar.text = msg;
      this.snackbar.show = true;
    };
    window.$success = msg => {
      console.log(msg);
      this.snackbar.color = "success";
      this.snackbar.text = msg;
      this.snackbar.show = true;
    };
  },
  mounted() {
    this.onResize();
    window.addEventListener("resize", this.onResize, { passive: true });
  },
  beforeDestroy() {
    if (typeof window !== "undefined") {
      window.removeEventListener("resize", this.onResize, { passive: true });
    }
  },
  methods: {
    toggleMenu() {
      if (
        (this.$vuetify.breakpoint.lg || this.$vuetify.breakpoint.xl) === true
      ) {
        this.primaryDrawer.mini = !this.primaryDrawer.mini;
      } else {
        this.primaryDrawer.model = !this.primaryDrawer.model;
      }
    },
    onResize() {
      var breakpoint = this.$vuetify.breakpoint;
      var isLg = this.$vuetify.breakpoint.lg || this.$vuetify.breakpoint.xl;
      if (isLg === false) {
        this.primaryDrawer.mini = false;
      }
    }
  }
};
</script>
<style>
a {
  text-decoration: none !important;
}
</style>

